블로그_12_모바일 반응형 최적화

모바일에서도 제대로 보여야 한다

폰으로 접속해보니, 버튼이 밀리고 텍스트가 잘리는 등 문제가 많았다.
애초에 별 생각 안하고 시작한 거라.... 아무튼 모바일 경험을 좀 손봤다.

1. 홈 화면: 레이아웃 재정렬

레이아웃도 점검하고, 이것저것 모바일 환경에 맞게 개선했다.
액티비티 그래프 요소가 얼기설기 위치도 잘 안맞고 반응형으로 작동도 안하고 좀 정리가 안되어 있었는데, 이것도 수정했다.

• 컬럼 배치: 1열 → 2열(md) → 3열(lg) 단계별 전환
• 카드 크기/패딩: 모바일에서 축소
• 헤더 영역 텍스트 크기 반응형 조정

2. 사이드바: 모바일 오버레이 모드

기존 사이드바는 PC 기준으로만 동작했다.
모바일에서는 아예 사라지거나, 화면을 덮거나 레이아웃을 깨는 문제가 있었다.
useState와 useEffect로 화면 크기를 감지하고, 메뉴 클릭 핸들러에 조건을 걸어 처리했다.
전체적으로 ChatGPT나 Gemini같이 최신 AI 웹페이지를 기준으로 삼았다.

• 모바일(768px 미만)에서는 오버레이로 전환
• 메뉴 클릭 시 자동으로 사이드바 닫힘
• PC에서는 기존 동작 유지

3. Study Tree: 모든 패널 반응형 처리

Study Tree 페이지는 요소가 많아서 모바일 대응이 까다로웠다.

AI 분석 버튼 위치 변경

• 기존: 그래프 위에 절대 위치로 떠 있음
• 변경: Documentation 버튼 옆에 배치

그래프 패널 높이 축소

• ReactFlow 라이브러리 내부에 h-[1200px]가 하드코딩되어 있었음
• h-[600px] lg:h-[1200px]로 변경해 모바일에서 적절한 높이 유지
• 불필요한 버튼(fitView, interactive) 숨기고 컨트롤 배치 변경
• 불필요한 미니맵 제거

학습 브리핑 텍스트 줄바꿈

• 긴 영문 링크가 줄바꿈 없이 부모 요소를 넘어가는 문제
• break-all 적용으로 글자 단위 줄바꿈
• 클릭 가능한 링크는 button → span으로 변경해 inline 텍스트 흐름 유지

4. rootscan/asmspeak: Bento Grid 카드 대응

두 페이지는 동일한 레이아웃 구조를 공유한다.
Hero 섹션과 Bento Grid 카드가 핵심이다.

크기/패딩 반응형 처리

제목: text-3xl sm:text-4xl md:text-6xl
부제목: text-base sm:text-lg md:text-xl
버튼: h-12 sm:h-14, px-6 sm:px-8
카드: p-6 sm:p-10, rounded-2xl sm:rounded-3xl
그리드: auto-rows-auto md:auto-rows-[280px]

모바일에서는 패딩과 둥근 모서리를 줄이고, 그리드 높이를 auto로 풀었다.
텍스트 크기도 단계별로 조정해 좁은 화면에서 읽기 편하게 만들었다.

Tailwind 반응형 참고

모바일 우선(Mobile First)이 원칙.
기본값은 모바일 스타일, sm: 이상에서 점진적으로 확장.

정리

• 홈 화면: 컬럼/카드 반응형 재정렬
• 사이드바: 모바일 오버레이 + 자동 닫힘
• Study Tree: 그래프 높이/Controls 정리, 텍스트 줄바꿈 개선
• rootscan/asmspeak: 크기/패딩 단계별 반응형 처리

모바일 대응은 나중에 하면 어렵다.
처음부터 작은 화면 기준으로 만들고, PC에서 확장하는 게 맞다.
다음 기능은 모바일 먼저 생각하면서 만들어보자.